<template>
	<div class="app-container">
		<!--弹窗-->
		<el-dialog :title="permissionDialog.title" width="850px" :close-on-click-modal="true"
				:visible.sync="permissionDialog.visible" @open="handleProject()" @close="handleClose('permissionForm')">
          <el-form :model="permissionDialog.info" :rules="rules" ref="permissionForm" :inline="true" label-width="80px">
			<el-form-item label="账号" prop="userId">
			    <el-input v-model.trim="permissionDialog.info.userId" placeholder="用户账号"></el-input>
			</el-form-item>
            <el-form-item label="角色" prop="role">
                <el-radio-group v-model="permissionDialog.info.role">
                    <el-radio v-if="$store.getters.user.isAdmin" label="OWNER">OWNER</el-radio>
                    <el-radio label="PARTNER">PARTNER</el-radio>
                    <el-radio label="VIEWER">VIEWER</el-radio>
                  </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button :loading="loading" type="primary" icon="el-icon-circle-plus" @click="handleSave('permissionForm')">添加</el-button>
            </el-form-item>
		  </el-form>
          <el-table :data="project.userPermissions" ref="permission" stripe highlight-current-row border height="450">
              <el-table-column prop="userId" label="账号"></el-table-column>
              <el-table-column prop="userName" label="名称"></el-table-column>
              <el-table-column prop="role" label="角色"></el-table-column>
              <el-table-column prop="authorDate" label="时间" width="160">
                  <template slot-scope="scope">
                  	{{scope.row.authorDate | dateFormat }}
                  </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="100" >
                  <template slot-scope="scope">
                      <el-link v-if="project.ownerId!=scope.row.userId || $store.getters.user.isAdmin"
                            icon="el-icon-delete" type="warning" :underline="false" @click="handleRemove(scope.row)">移除</el-link>
                  </template>
              </el-table-column>
          </el-table>

		</el-dialog>
	</div>
</template>

<script>
    import YamlEditor from '@/components/YamlEditor/Index.vue';

	export default {
		props: {
		  permissionDialog: {},
		},
		data() {
			return {
				loading: false,
                project: [],
				rules: {
					userId: [
						{ required: true, message: '请输入用户账号' },
					],
                    role: [
                        { required: true, message: '请选择角色' },
                    ],
				}
			}
		},
		methods: {
            async handleRemove(row) {
                if (this.$store.getters.user.userId==row.userId) {
                    this.$message({ message: '不允许给自己授权', type: 'warning' });
                    return;
                }
                let params = {
                    projectId: this.permissionDialog.info.projectId,
                    env: this.permissionDialog.info.env,
                    userId: row.userId
                }
                await this.$http.fetch(this.api.projectPermissionRemove, params);
                this.handleProject();

                this.$emit("update"); //更新父组件
            },
			handleSave(form) {
				this.$refs[form].validate(valid => {
					if (!valid) {
						return;
					}
                    if (this.$store.getters.user.userId==this.permissionDialog.info.userId) {
                        this.$message({ message: '不允许给自己授权.', type: 'warning' });
                        return;
                    }
					this.loading = true;
					let params = {
                        projectId: this.permissionDialog.info.projectId,
                        env: this.permissionDialog.info.env,
                        userId: this.permissionDialog.info.userId,
                        role: this.permissionDialog.info.role
                    }
					this.$http.fetch(this.api.projectPermissionModify, params)
						.then(data => {
							this.$message({ message: '账号授权成功！', type: 'success' });

							this.$emit("update"); //更新父组件
							this.loading = false;

                            this.handleProject();
						}).catch(err=> {
                            this.loading = false;
                        });
				});
			},
            async handleProject() {
                let params = {projectId: this.permissionDialog.info.projectId};
                this.project = await this.$http.fetch(this.api.projectInfo, params);
            },
			handleClose(form) {
				this.permissionDialog.visible = false;
				this.permissionDialog.info = {};
				this.$refs[form].resetFields(); //重置form
			}
		},
        components: { YamlEditor }
	}
</script>
<style scoped>
    .switch-item {
        position: absolute;
        right: 50px;
        margin-top: -30px;
        z-index: 10;
    }
</style>
